import React, { memo, useRef } from "react";
import ThemeContext from "../context/theme-context";
interface IProps {
  ref?: React.RefObject<HTMLHeadingElement>;
}
const GetDom: React.FC<IProps> = memo(() => {
  const contentRef = useRef<HTMLHeadingElement>(null);
  const theme = React.useContext(ThemeContext);

  // 获取dom方式
  const getNativeDom = () => {
    // 1. 原生js获取dom 不推荐
    const title: HTMLElement | null = document.querySelector(".title");
    const content = document.querySelector(".content");
    if (title) {
      title.style.color = "red";
    }
    console.log(title!.textContent, content);

    // react 中获取dom方式
    // 1.ref 不建议使用ref修改dom
    if (contentRef.current) {
      contentRef.current.style.color = "blue";
      contentRef.current.innerHTML = "新的内容";
    }
    console.log(contentRef.current?.innerHTML, "contentRef");
  };
  return (
    <div className={`${theme === "dark" ? "dark" : "light"}`}>
      <h1 className="title">主标题</h1>
      <p className="content" ref={contentRef}>
        内容
      </p>
      <button onClick={() => getNativeDom()}>获取DOM</button>
    </div>
  );
});

export default GetDom;
